<template>
  <div class>
    <el-tabs type="border-card" v-model="activeName" stretch @tab-click="handleClick">
      <el-tab-pane name="first" :disabled="tabDisabled1">
        <span slot="label">
          <el-button disabled size="mini" circle>1.</el-button>数据库表设置
        </span>
        <!-- <div > -->
        <el-form
          size="mini"
          :model="codeForm"
          inline
          label-width="100px"
          :rules="rules"
          ref="codeForm"
          class="demo-ruleForm"
        >
          <el-form-item label="表名" prop="tableName" style="width:300px">
            <!-- <el-input size="mini" v-model="codeForm.tableName" style="width:200px"></el-input> -->
            <template>
              <el-select v-model="codeForm.tableName" clearable filterable style="width:200px" placeholder="请选择">
                <el-option
                  v-for="item in tableNameList"
                  :key="item.tableName"
                  :label="item.tableName"
                  :value="item.tableName">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
          <el-form-item label="项目包名" prop="basePackageName" style="width:300px">
            <el-input
              size="mini"
              placeholder="默认com.epsoft.gisv2"
              v-model="codeForm.basePackageName"
              style="width:200px"
            ></el-input>
          </el-form-item>
          <el-form-item label="工程包名" prop="projectName" style="width:300px">
            <el-input size="mini" v-model="codeForm.projectName" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item label="模块包名" prop="modelPackageName" style="width:300px">
            <el-input
              size="mini"
              placeholder="默认空"
              v-model="codeForm.modelPackageName"
              style="width:200px"
            ></el-input>
          </el-form-item>
          <el-form-item label="忽略前缀" prop="removeColumnPre" style="width:300px">
            <el-input
              size="mini"
              placeholder="默认空"
              v-model="codeForm.removeColumnPre"
              style="width:200px"
            ></el-input>
          </el-form-item>
          <el-form-item label="生成路径" prop="projectPath" style="width:300px">
            <el-input
              size="mini"
              placeholder="默认E:\genertor\年月日时分秒"
              v-model="codeForm.projectPath"
              style="width:200px"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="前端路径" prop="uiPath" style="width:300px">
            <el-input
              size="mini"
              placeholder="默认E:\genertor\ui\"
              v-model="codeForm.uiPath"
              style="width:200px"
            ></el-input>
          </el-form-item> -->
          <el-form-item label="显示列" style="width:300px">
            <el-button type="primary" @click="init" size="mini">查询</el-button>
          </el-form-item>
        </el-form>
        <!-- <div style="height:200px;overflow:auto"> -->
        <el-table :data="tableData" border style="width: 100%" height="200">
          <el-table-column align="center" label="操作" width="50" fixed>
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                class="el-icon-remove"
                @click="handleDelete(scope.$index, scope.row)"
              ></el-button>
            </template>
          </el-table-column>
          <el-table-column type="index" width="50" label="序号"></el-table-column>
          <el-table-column label="列名" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.columnName" disabled size="mini"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="说明" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.columnComment" disabled size="mini"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="物理类型" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.dataType" disabled size="mini"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="数据长度" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.characterMaximumLength" disabled size="mini"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="数值位数" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.numericPrecision" disabled size="mini"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="小数点位数" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.numericScale" disabled size="mini"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="列类型" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.columnType" disabled size="mini"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="主键" align="center">
            <template slot-scope="scope">
              <el-checkbox
                disabled
                :checked="scope.row.columnKey=='PRI'?true:false"
              ></el-checkbox>
            </template>
          </el-table-column>
        </el-table>
        <!-- </div> -->
        <!-- </div> -->
      </el-tab-pane>
      <el-tab-pane name="second" :disabled="tabDisabled2">
        <span slot="label">
          <el-button disabled size="mini" circle>2.</el-button>Java实体设置
        </span>
        <!-- <div style="height:350px;overflow:auto"> -->
        <el-table :data="javaBeanData" border style="width: 100%" height="380">
          <el-table-column type="index" width="50" label="序号"></el-table-column>
          <el-table-column label="列名" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.columnName" disabled size="mini"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="说明" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.columnComment" disabled size="mini"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="java类型" align="center">
            <template slot-scope="scope">
              <el-select size="mini" v-model="scope.row.propertyType" disabled>
                <el-option label="String" value="String"></el-option>
                <el-option label="Date" value="Date"></el-option>
                <el-option label="BigDecimal" value="BigDecimal"></el-option>
                <el-option label="Integer" value="Integer"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="java属性名称" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.propertyName" disabled size="mini"></el-input>
            </template>
          </el-table-column>
        </el-table>
        <!-- </div> -->
      </el-tab-pane>
      <el-tab-pane name="third" :disabled="tabDisabled3">
        <span slot="label">
          <el-button disabled size="mini" circle>3.</el-button>表单页面
        </span>
        <!-- <div style="height:350px;overflow:auto"> -->
        <el-table :data="tableFormData" border style="width: 100%" height="380">
          <el-table-column type="index" width="50" label="序号"></el-table-column>
          <el-table-column label="列名" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.columnName" disabled size="mini"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="属性名" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.propertyName" disabled size="mini"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="列类型" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.columnType" disabled size="mini"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="说明" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.columnComment" disabled size="mini"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="表单" align="center" width="50">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isForm" :checked="true" ></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="显示表单类型" align="center">
            <template slot-scope="scope">
              <el-select size="mini" v-model="scope.row.formType" clearable>
                <el-option label="单行文本" value="text"></el-option>
                <el-option label="多行文本" value="textarea"></el-option>
                <el-option label="下拉选项" value="Select"></el-option>
                <el-option label="多选框" value="checkbox"></el-option>
                <el-option label="数值文本" value="InputNumber"></el-option>
                <el-option label="日期选择" value="Date"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="字典类型" align="center">
            <template slot-scope="scope">
                <el-select v-model="scope.row.enumType" clearable placeholder="请选择" size="mini">
                    <el-option
                    v-for="item in enumType"
                    :key="item.code"
                    :label="item.codeName"
                    :value="item.code">
                    </el-option>
                </el-select>
            </template>
          </el-table-column>
        </el-table>
        <!-- </div> -->
      </el-tab-pane>
      <el-tab-pane name="fourth" :disabled="tabDisabled4">
        <span slot="label">
          <el-button disabled size="mini" circle>4.</el-button>表单校验
        </span>
        <!-- <div style="height:350px;overflow:auto"> -->
        <el-table :data="tableFormCheckData" border style="width: 100%" height="380">
          <el-table-column type="index" width="50" label="序号"></el-table-column>
          <el-table-column label="列名" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.columnName" disabled size="mini"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="属性名" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.propertyName" disabled size="mini"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="说明" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.columnComment" disabled size="mini"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="非空" align="center" width="50">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isNull" :checked="true"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="校验类型" align="center">
            <template slot-scope="scope">
              <el-select size="mini" v-model="scope.row.formCheckType">
                <el-option label="字符串" value="String"></el-option>
                <el-option label="日期类型" value="Date"></el-option>
                <el-option label="数值类型" value="Number"></el-option>
                <!-- <el-option label="金额" value="Amount"></el-option>
                <el-option label="电话号码" value="Tel"></el-option>
                <el-option label="手机号" value="Phone"></el-option>
                <el-option label="邮箱" value="Email"></el-option>
                <el-option label="身份证号码" value="CarId"></el-option> -->
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="最大长度" align="center">
            <template slot-scope="scope">
              <el-input-number
              size="mini"
              style="width:100%"
              v-model="scope.row.maxLength"
              :min="0"
              :max="scope.row.maxLength/1"
              label="最大长度"
            ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="小数位数" align="center">
              <template slot-scope="scope">
                <el-input-number
                size="mini"
                style="width:100%"
                v-model="scope.row.numericScale"
                :min="0"
                :max="scope.row.numericScale/1"
                label="最小长度"
              ></el-input-number>
              </template>
            </el-table-column>
          <el-table-column label="最小值" align="center">
            <template slot-scope="scope">
              <el-input-number
              size="mini"
              style="width:100%"
              v-model="scope.row.minValue"
              label="最小值"
            ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="最大值" align="center">
            <template slot-scope="scope">
                <el-input-number
                size="mini"
                style="width:100%"
                v-model="scope.row.maxValue"
                :min="0"
                label="最大值"
              ></el-input-number>
            </template>
          </el-table-column>
        </el-table>
        <!-- </div> -->
      </el-tab-pane>
      <el-tab-pane name="five" :disabled="tabDisabled5">
        <span slot="label">
          <el-button disabled size="mini" circle>5.</el-button>列表页面
        </span>
        <!-- <div style="height:350px;overflow:auto"> -->
        <el-table :data="tableFormPageData" border style="width: 100%" height="380">
          <el-table-column type="index" width="50" label="序号"></el-table-column>
          <el-table-column label="列名" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.columnName" disabled size="mini"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="属性名" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.propertyName" disabled size="mini"></el-input>
              </template>
            </el-table-column>
          <el-table-column label="说明" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.columnComment" disabled size="mini"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="查询表单类型" align="center">
              <template slot-scope="scope">
                <el-select size="mini" disabled v-model="scope.row.formType" clearable>
                  <el-option label="单行文本" value="text"></el-option>
                  <el-option label="多行文本" value="textarea"></el-option>
                  <el-option label="下拉选项" value="Select"></el-option>
                  <el-option label="多选框" value="checkbox"></el-option>
                  <el-option label="数值文本" value="InputNumber"></el-option>
                  <el-option label="日期选择" value="Date"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="字典类型" align="center">
              <template slot-scope="scope">
                  <el-select v-model="scope.row.enumType" clearable disabled placeholder="请选择" size="mini">
                      <el-option
                      v-for="item in enumType"
                      :key="item.code"
                      :label="item.codeName"
                      :value="item.code">
                      </el-option>
                  </el-select>
              </template>
            </el-table-column>
            <el-table-column label="列表" align="center" width="50">
              <template slot-scope="scope">
                <el-checkbox v-model="scope.row.isTable" :checked="true"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column label="查询" align="center" width="50">
              <template slot-scope="scope">
                <el-checkbox v-model="scope.row.isSearch" :checked="true"></el-checkbox>
              </template>
            </el-table-column>
           <el-table-column label="查询匹配方式" align="center">
            <template slot-scope="scope">
              <el-select size="mini" v-model="scope.row.searchType">
                <el-option label="=" value="="></el-option>
                <el-option label="!=" value="!="></el-option>
                <el-option label=">" value=">"></el-option>
                <el-option label=">=" value=">="></el-option>
                <el-option label="<" value="<"></el-option>
                <el-option label="<=" value="<="></el-option>
                <el-option label="Like" value="Like"></el-option>
                <!-- <el-option label="Between" value="Between"></el-option> -->
              </el-select>
            </template>
          </el-table-column>
        </el-table>
        <!-- </div> -->
      </el-tab-pane>
    </el-tabs>
    <el-card class="ep-card ep-search">
      <el-row :gutter="0">
        <el-col :span="1.5" style="float:right">
          <el-button size="mini" :disabled="butDisabledS" @click="doGeneCode">一键生成</el-button>
        </el-col>
        <el-col :span="1.5" style="float:right">
          <el-button size="mini" :disabled="butDisabledNext" @click="next">下一步</el-button>
        </el-col>
        <el-col :span="1.5" style="float:right">
          <el-button size="mini" :disabled="butDisabledLast" @click="last">上一步</el-button>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableNameList:[],
      enumType:[],
      butDisabledLast: true,
      butDisabledNext: false,
      butDisabledS: true,
      activeName: "first",
      tabDisabled1: false,
      tabDisabled2: true,
      tabDisabled3: true,
      tabDisabled4: true,
      tabDisabled5: true,
      num: 1,
      codeForm: {
        dbName:'',
        tableName: "",
        basePackageName: "",
        projectName: "",
        modelPackageName: "",
        removeColumnPre: "",
        projectPath: "",
        uiPath: ""
      },
      tableData: [],
      javaBeanData: [],
      tableFormData: [],
      tableFormCheckData: [],
      tableFormPageData: [],
      rules: {
        tableName: [{ required: true, message: "请输入表名", trigger: "change" }],
        projectName: [
          { required: true, message: "请输入工程名", trigger: "change" }
        ]
      },
    };
  },
  mounted() {
    this.getEnumType();
    this.getTableNameList();
  },
  methods: {
    getTableNameList(){
      this.$api
              .formPost("/api/code/codeTableInfo/getTableNameList", {
                dbName:this.codeForm.dbName,
              })
              .then(res => {
                  if (res.retHead.code == "0000000") {
                      this.tableNameList=res.retBody;
                  }
              });
    },
    getEnumType(){
          let params = {
              codeEnabledState:"1"//1:启用，0:不启用（空代表全部）
          };
          this.$api
              .formPost("/api/auth/sysCode/doGetEnumTypeList", params)
              .then(res => {
                  if (res.retHead.code == "0000000") {
                      this.enumType=res.retBody;
                  }
              });
    },
    handleClick(tab, event) {
      this.num = parseInt(tab.index) + 1;
      if (this.num > 1) {
        this.butDisabledLast = false;
        if (this.num == 5) {
          this.butDisabledNext = true;
          this.butDisabledS = false;
        } else {
          this.butDisabledNext = false;
          this.butDisabledS = true;
        }
      } else {
        this.butDisabledLast = true;
        this.butDisabledS = true;
        this.butDisabledNext = false;
      }
      for (var i = 1; i <= 5; i++) {
        if (this.num < i) {
          let tabDisabled = "tabDisabled" + i;
          if (tabDisabled === "tabDisabled2") {
            this.tabDisabled2 = true;
          }
          if (tabDisabled === "tabDisabled3") {
            this.tabDisabled3 = true;
          }
          if (tabDisabled === "tabDisabled4") {
            this.tabDisabled4 = true;
          }
          if (tabDisabled === "tabDisabled5") {
            this.tabDisabled5 = true;
          }
        }
      }
    },
    doGeneCode() {
      let user=JSON.parse(sessionStorage.getItem("user"));
      let params = {
        createUserId:user.id,
        createUserName:user.realName,
        projectName: this.codeForm.projectName,
        tableName: this.codeForm.tableName,
        basePackageName: this.codeForm.basePackageName,
        modelPackageName: this.codeForm.modelPackageName,
        projectPath: this.codeForm.projectPath,
        uiPath: this.codeForm.uiPath,
        removeColumnPre: this.codeForm.removeColumnPre,
        tableFormDataList: this.tableFormData,
        tableFormPageDataList:this.tableFormPageData,
        tableFormCheckDataList:this.tableFormCheckData,
      };
      this.$api.post("/api/code/codeTableInfo/doCodeGene", params).then(res => {
        if (res.retHead.code == "0000000") {
          this.$message({
            type: "success",
            message: "执行成功!"
          });
          this.$emit('fatherInit');
        } else {
          this.$message({
            type: "error",
            message: res.retHead.message
          });
        }
      });
    },
    init() {
      this.$refs.codeForm.validate(valid => {
        if (valid) {
          let params = {
            tableName: this.codeForm.tableName
          };
          this.$api
            .formPost("/api/code/codeTableInfo/doGetByTableName", params)
            .then(res => {
              if (res.retHead.code == "0000000") {
                this.tableData = res.retBody;
              } else {
                this.$message({
                  type: "error",
                  message: res.retHead.message
                });
              }
            });
        } else {
          return false;
        }
      });
    },
    handleDelete(index, row) {
      this.tableData.splice(index, 1);
    },
    last() {
      this.num = this.num - 1; //2-1
      if (this.num == 1) {
        this.butDisabledLast = true;
      }
      if (this.num > 1) {
        this.butDisabledLast = false;
        if (this.num >= 5) {
          this.butDisabledNext = true;
          this.butDisabledS = false;
        } else {
          this.butDisabledNext = false;
          this.butDisabledS = true;
        }
      }
      for (var i = 4; i >= 1; i--) {
        let tabDisabled = "tabDisabled" + i;
        if (this.num == i) {
          if (tabDisabled === "tabDisabled4") {
            this.tabDisabled1 = false;
            this.tabDisabled2 = false;
            this.tabDisabled3 = false;
            this.tabDisabled4 = false;
            this.tabDisabled5 = true;
            this.activeName = "fourth";
          }
          if (tabDisabled === "tabDisabled3") {
            this.tabDisabled1 = false;
            this.tabDisabled2 = false;
            this.tabDisabled3 = false;
            this.tabDisabled4 = true;
            this.tabDisabled5 = true;
            this.activeName = "third";
          }
          if (tabDisabled === "tabDisabled2") {
            this.tabDisabled1 = false;
            this.tabDisabled2 = false;
            this.tabDisabled3 = true;
            this.tabDisabled4 = true;
            this.tabDisabled5 = true;
            this.activeName = "second";
          }
          if (tabDisabled === "tabDisabled1") {
            this.tabDisabled1 = false;
            this.tabDisabled2 = true;
            this.tabDisabled3 = true;
            this.tabDisabled4 = true;
            this.tabDisabled5 = true;
            this.activeName = "first";
          }
        }
      }
    },
    next() {
      if (this.tableData.length > 0) {
        this.num += 1;
        if (this.num > 5) {
          return;
        }
        if (this.num > 1) {
          this.butDisabledLast = false;
          if (this.num == 5) {
            this.butDisabledNext = true;
            this.butDisabledS = false;
          } else {
            this.butDisabledNext = false;
            this.butDisabledS = true;
          }
        } else {
          this.butDisabledLast = true;
        }
        let tabDisabled = "tabDisabled" + this.num;
        if (tabDisabled === "tabDisabled2") {
          this.tabDisabled2 = false;
          this.javaBeanData = [];
          for (var i = 0; i < this.tableData.length; i++) {
            let bean = {};
            bean.columnName = this.tableData[i].columnName;
            bean.columnComment = this.tableData[i].columnComment;
            if (
              this.tableData[i].dataType === "varchar" ||
              this.tableData[i].dataType === "char"
            ) {
              bean.propertyType = "String";
            }
            if (this.tableData[i].dataType === "decimal") {
              bean.propertyType = "BigDecimal";
            }
            if (this.tableData[i].dataType === "datetime") {
              bean.propertyType = "Date";
            }
            if (this.tableData[i].dataType === "int") {
              bean.propertyType = "Integer";
            }
            bean.propertyName = this.formatConver(this.tableData[i].columnName);
            this.javaBeanData.push(bean);
          }
          this.activeName = "second";
        }
        if (tabDisabled === "tabDisabled3") {
          this.tabDisabled3 = false;
          this.activeName = "third";
          this.tableFormData = [];
          for (var i = 0; i < this.tableData.length; i++) {
            let bean = {};
            bean.columnName = this.tableData[i].columnName;
            bean.columnComment = this.tableData[i].columnComment;
            bean.columnType = this.tableData[i].columnType;
            bean.propertyName = this.javaBeanData[i].propertyName;
            this.tableFormData.push(bean);
          }
        }
        if (tabDisabled === "tabDisabled4") {
          this.tabDisabled4 = false;
          this.activeName = "fourth";
          this.tableFormCheckData = [];
          for (var i = 0; i < this.tableData.length; i++) {
            let bean = {};
            bean.columnName = this.tableData[i].columnName;
            bean.propertyName = this.javaBeanData[i].propertyName;
            bean.columnComment = this.tableData[i].columnComment;
            if (
              this.tableData[i].dataType === "varchar" ||
              this.tableData[i].dataType === "char"
            ) {
              bean.formCheckType = "String";
              bean.maxLength=this.tableData[i].characterMaximumLength;
            }
            if (this.tableData[i].dataType === "decimal") {
              bean.formCheckType = "Number";
              bean.maxLength=this.tableData[i].numericPrecision;
              bean.numericScale=this.tableData[i].numericScale;
            }
            if (this.tableData[i].dataType === "datetime") {
              bean.formCheckType = "Date";
            }
            this.tableFormCheckData.push(bean);
          }
        }
        if (tabDisabled === "tabDisabled5") {
          this.tabDisabled5 = false;
          this.activeName = "five";
          this.tableFormPageData = [];
          for (var i = 0; i < this.tableData.length; i++) {
            let bean = {};
            bean.columnName = this.tableData[i].columnName;
            bean.propertyName = this.javaBeanData[i].propertyName;
            bean.columnComment = this.tableData[i].columnComment;
            bean.formType=this.tableFormData[i].formType;
            bean.enumType=this.tableFormData[i].enumType;
            this.tableFormPageData.push(bean);
          }
        }
      }else{
          this.$message.error("没有查询结果！")
          return false;
      }
    },
    formatConver(sName) {
      let str = sName.toLowerCase();
      var arr = str.split("_");
      var len = arr.length;
      for (var i = 1; i < len; i++) {
        arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].substring(1);
      }
      var result = arr.join("");
      return result;
    }
  }
};
</script>